<template>
  <!-- 搜索页面 -->
  <Search v-show="isSearch" v-model="isSearch"></Search>

  <div class="charts" v-show="!isSearch">
    <!-- 头部定位 -->
    <div class="charts-top">
      <!-- 头部搜索栏 -->
      <TopSearch v-model="isSearch"></TopSearch>

      <!-- 标题列表 横向滑动 -->
      <TopTitleList 
        :chartsTitleList="chartsTitleList"
        :currentIndex="currentIndex"
        @onClickTitle1="onClickTitle1"
      ></TopTitleList>
    </div>

    <!-- 商品列表部分 -->
    <div class="charts-main">
      <!-- 侧边栏 -->
      <div class="side-bar">
        <el-scrollbar ref="sideBarScroll">
          <div :class="['side-item', index == currentTitleTwoIndex && 'active']"
            v-for="(titleTwo, index) in chartsTitleList[currentIndex]?.tabWraps" :key="titleTwo.id"
            @click="onClickTitle2(titleTwo.rankingId, index)">
            {{ titleTwo.name }}
          </div>
        </el-scrollbar>
      </div>

      <!-- 商品列表 -->
      
      
        <el-scrollbar class="goods-list" ref="godsScroll" always :min-size="100">
          <ul 
         v-infinite-scroll="load"
        :infinite-scroll-immediate="false"
        :infinite-scroll-distance="20"
      >
          <li class="" v-for="(item, index) in goodsPageList" :key="item.id">
           <router-link class="goods-item" :to="{
                name:'detail',
                params:{
                  id:item.id
                }
           }" >
            <div class="good-No">
              <div :class="index == 0 ? 'red' : index == 1 ? 'orange' : index == 2 ? 'yellow' : ''">{{ index + 1 }}</div>
            </div>
            <div class="good-content">
              <img class="good-img" :v-lazy="'https://imagev2.xmcdn.com/' + item.cover"
                :src="'https://imagev2.xmcdn.com/' + item.cover" alt="">
              <div class="good-text">
                <div class="title-score">
                  <div class="title">{{ item.albumTitle }}</div>
                  <div class="score">{{ item.salePoint }}</div>
                </div>
                <div class="read">
                  <van-icon class="read-text" name="play-circle-o" />
                  <span class="read-text">{{ (item.playCount / 100000000).toFixed(2) }}亿</span>
                  <van-icon class="read-text" name="bar-chart-o" />
                  <span class="read-text">{{ item.trackCount }}</span>
                </div>
              </div>
            </div>


           </router-link>
          </li>
        </ul>
        </el-scrollbar>
      

    </div>


  </div>
</template>

<script setup lang="ts">
import { showToast } from 'vant';
import { ref } from "vue";
import TopSearch from "./components/TopSearch/TopSearch.vue"
import TopTitleList from "./components/TopTitleList/TopTitleList.vue"
import Search from "./components/Search/Search.vue"
import type { DataType } from "./api/chartsApi"
import { onMounted } from "vue";
import chartsApi from "./api/chartsApi";
import { watch } from "vue";

/* 分页列表 */
const goodsPageList = ref<DataType[]>([])
let limit = 10;

const load = ()=>{
  if(limit>chartsGoodsList.value.length-10) return
  showToast({
    message: '加载中...',
    type:'loading',
    position: 'bottom',
    duration:300
  });
  
  setTimeout(()=>{
    let list = chartsGoodsList.value.slice(limit,limit+10)
    limit = limit + 10;
    goodsPageList.value.push(...list)
  },300)
}





/* 显示隐藏搜索页 */
const isSearch = ref(false)

/* 排行榜标题数据 */
const chartsTitleList = ref<DataType[]>([])
const currentIndex = ref(0)//当前一级标题高亮
const currentTitleTwoIndex = ref(0)//二级标题高亮
/* 全部商品的数据 */
const chartsGoodsList = ref<DataType[]>([])

/* 点击一级标题事件 */
const onClickTitle1 = (index: number) => {
  currentIndex.value = index;
  currentTitleTwoIndex.value = 0;
}

/* 点击二级标题事件 */
const onClickTitle2 = (id: number, index: number) => {
  if(currentTitleTwoIndex.value == index) return;
  currentTitleTwoIndex.value = index;
  limit = 10;
  getChartsGoodsList(id);
}

/* 监听一级标题的变化 */
watch(currentIndex, (nval) => {
  getChartsGoodsList(chartsTitleList.value[nval]?.tabWraps[0].rankingId)
  godsScroll.value.setScrollTop(0)
})

/*监听二级标题变化 滚动到顶部 */
const sideBarScroll = ref()
const godsScroll = ref()
watch(currentTitleTwoIndex, () => {
  sideBarScroll.value.setScrollTop(0)
  godsScroll.value.setScrollTop(0)
})


/* 获取排行榜标题数据的功能函数 */
const getChartsTitleList = async () => {
  try {
    let res = await chartsApi.getChartsTitleList();
    if (res.ret == 200) {
      chartsTitleList.value = res.data.tabLists;
      /* 获取初始化商品数据 */
      getChartsGoodsList(res.data.tabLists[0]?.tabWraps[0].rankingId)
    }
  } catch (error) {
    console.log(error)
  }
}

/* 获取排行商品列表功能函数 */
const getChartsGoodsList = async (rankingId: number) => {
  try {
    let res = await chartsApi.getChartsGoodsList(rankingId);
    if (res.ret == 200) {
      chartsGoodsList.value = res.data.rankList[0]?.albums;
      goodsPageList.value = res.data.rankList[0]?.albums.slice(0,10)
    }
  } catch (error) {
    console.log(error);

  }
}

/* 生命周期 */
onMounted(() => {
  getChartsTitleList()
})


</script>

<style lang="less" scoped>
.charts {
  position: relative;
  height: 100vh;
  .charts-top {
    position: absolute;
    background-color: #fff;
    z-index: 2;
    border-bottom: 1px #ddd solid;
  }
}

/* 头部标题滑动 */


/* 主题部分  */
.charts-main {
  display: flex;
  font-size: 16px;
  color: #666;
  padding-top: 115px;
  height: 100vh;
  box-sizing: border-box;

  /* 侧边栏 */
  .side-bar {
    width: 20%;
    background-color: #eee;
    height: 100%;

    :deep(.el-scrollbar__thumb) {
      height: 0 !important;
    }

    .side-item {
      height: 50px;
      line-height: 50px;
      text-align: center;
      border-bottom: 1px solid #ddd;

      &.active {
        border-left: #f86442 4px solid;
        background-color: #fff;
      }
    }
  }

  /* 商品列表 */
  .goods-list {
    width: 80%;
    font-size: 16px;

    .goods-item {
      display: flex;
      padding: 16px 0;
      width: 100%;

      .good-No {
        width: 18%;
        text-align: center;
        padding-top: 10px;
        flex-shrink: 0;

        div {
          width: 20px;
          height: 20px;
          line-height: 20px;
          border-radius: 50%;
          margin: 0 auto;
          font-size: 20px;
          font-weight: 700;
          padding: 3px;
        }

        .red {
          background-color: red;
          color: #fff;
          font-size: 16px;
          font-weight: 400;
        }

        .orange {
          background-color: orange;
          color: #fff;
          font-size: 16px;
          font-weight: 400;
        }

        .yellow {
          background-color: yellow;
          color: #fff;
          font-size: 16px;
          font-weight: 400;
        }
      }

      .good-content {
        display: flex;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 14px;
        border-bottom: 1px #ddd solid;
        padding-bottom: 16px;

        .good-img {
          width: 80px;
          height: 75px;
          border-radius: 6px;
        }

        .good-text {
          padding: 0 12px;
          width: 140px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .title {
            line-height: 20px;
            width: 140px;
            font-size: 14px;
            font-weight: 700;
            color: #666;
            margin-bottom: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            /* display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2; */
          }

          .read {
            .read-text {
              margin-right: 5px;
            }
          }
        }
      }
    }
  }
}
</style>